<template>
    <div>
      <h2>手机号码登录页面</h2>
      <div class="phonelogin">
        <div class="outer_label">
          <img class="inner_label" src="../../assets/login.jpg">
        </div>
        <div class="how">
          <div class="count">账户密码登录</div>
          <div class="phone active">手机号登录</div>
        </div>
        <div class="login_form">
          <input type="text" class="qxs-ic_user" placeholder="手机号" v-model="tel">
          <div class="qxs-ic_password">
            <input type="password" autocomplete="off" v-model="code" placeholder="请输入验证码"class="yzm">
            <button class="getCAPTCHA send" size="small" type="primary">发送验证码</button>
          </div>
  
  
          <div class="auto">
            <span>自动登录</span><span style="float: right;color: #A9A9AB">忘记密码？</span>
          </div>
          <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button>
        </div>
      </div>
  
    </div>
  </template>
  
  <script>
    export default {
      name: "PhoneLogin",
      data() {
        return {
          tel: "",
          code: "",
          isBtnLoading: false,
        }
      },
      methods: {
        //  //获取验证码--调用获取短信验证码接口
        //  getCode: function () {
        //         const verification = this.ReginForm.tel;
        //         const url = " "
        //         console.log("url", url);
        //         this.$http.get(url).then(function (response) {
        //             console.log("请求成功", response)
        //         }, function (error) {
        //             console.log("请求失败", error);
        //         })
        //     },
  
        //登录
        async login() {
          if (!this.tel) {
            this.$message.error('手机号');
            return;
          }
          if (!this.code) {
            this.$message.error('请输入验证码');
            return;
          }
          //获取输入登录信息
          let obj = {
            tel: this.tel,
            code: this.code
          }
          console.log(obj)
          //调用登录接口
          // login().then(res=>{
  
          // })
          // let obj = {
          //   molie: this.tel,
          //   sms_code: this.code,
          //   type: '2'
          // }
          // login(obj).then(res=>{//登录的接口
          //   if(res.code===200){
          //        //取出来token用
  
          //   }
  
          // })
          //跳转到工作台首页
        }
      },
  
      computed: {
        btnText() {
          if (this.isBtnLoading) return '登录中...';
          return '登录';
        }
      },
      methods: {
        submit() {
          //弹框信息
          if (!this.userName) {
            this.$message.error('请输入用户名');
            return;
          }
          if (!this.password) {
            this.$message.error('请输入密码');
            return;
          }
          //获取输入登录信息
          let obj = {
            name: this.userName,
            psw: this.password
          }
          console.log(obj)
          //调用登录接口
          // login().then(res=>{
  
          // })
        }
      }
      ,
      created() {
  
        if (JSON.parse(localStorage.getItem('user')) && JSON.parse(localStorage.getItem('user')).userName) {
          this.userName = JSON.parse(localStorage.getItem('user')).userName;
          this.password = JSON.parse(localStorage.getItem('user')).password;
        }
      }
    };
  </script>
  
  <style scoped>
    .phonelogin {
      background: #eee;
      width: 500px;
      margin: auto;
    }
  
    .outer_label {
      /* width: 500px; */
      height: 100px;
      margin: 10px 140px;
    }
  
    .inner_label {
      width: 100%;
      height: 80px;
  
    }
  
    .login_form {
      width: 360px;
      margin: auto;
    }
  
    .how {
      width: 300px;
      height: 40px;
  
    }
  
    .qxs-ic_user {
      width: 360px;
      height: 40px;
      margin: 10px auto;
      border: none;
      border-radius: 3px;
    }
  
    .qxs-ic_password {
      width: 360px;
      height: 40px;
      margin: 10px auto;
      border: none;
      border-radius: 3px;
    }
  
    .auto {
      width: 400px;
      height: 40px;
      margin: auto;
      line-height: 40px;
    }
  
    .login_btn {
      width: 200px;
      height: 40px;
      margin-left: 120px;
    }
  
    .how {
      width: 360px;
      height: 40px;
      margin: auto;
      text-align: center;
      line-height: 40px;
      display: flex;
    }
  
    .count {
      width: 180px;
      height: 40px;
    }
  
    .phone {
      width: 180px;
      height: 40px;
    }
  
    .active {
      border-bottom: 3px solid rgb(8, 146, 226);
    }
    .yzm{
      width: 220px;
      height: 40px;
      border: none;
      border-radius:2px;
    }
    .send{
      width: 135px;
      height: 42px;
      border: none;
      border-radius:2px;
      background: #fff;
    }
  </style>